<template>
  <div :class="{ 'ly-is-full': isFull }">
    <div class="table">
      <el-table
        :height="tableHeight"
        border
        :data="tableData"
        v-loading="loadingPage"
        style="width: 100%"
        ref="tableref"
        @selection-change="handleSelectionChange"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        
        <el-table-column min-width="100" prop="name" label="名称"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div>操作</div>
              <div @click="setFull">
                <el-tooltip content="全屏" placement="bottom">
                  <el-icon><full-screen /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template #default="scope">
            <a :href="scope.row.link" style="color: #409eff">下载</a>
            <el-upload 
            v-if="authority([1])"
            @click="uptab(scope.row.nameTops)"
              class="upload-demo"
              :action="`${$config.API_URL}common/upload/`"
              :on-success="handleSuccess"
              :on-error="handleError"
              :before-upload="beforeUpload"
              :show-file-list="false" 
              accept=".xls,.xlsx"
            >
              <el-button type="primary">导入</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ElLoading, ElMessage } from "element-plus";
import { moban2, mobanadd } from "@/api/api";
import { getStorage } from "@/utils/util";

export default {
  data() {
    return {
      nameTops:'',
      isFull: false,
      loadingPage: false,
      tableData: [],
    };
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    uptab(e){ 
      this.nameTops=e
    },
    beforeUpload(file) {
      const isExcel = file.type === "application/vnd.ms-excel" || file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isExcel) {
        ElMessage.error("只能上传 Excel 文件（.xls, .xlsx）");
        return false;
      }
      if (!isLt2M) {
        ElMessage.error("文件大小不能超过 2MB");
        return false;
      }

      this.loadingInstance = ElLoading.service({
        lock: true,
        text: "正在上传...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },

    handleSuccess(res, file, fileList) {
      console.log(res, file, fileList,'--------1');
      if (res.code === 1) {
        let objs={}
        objs[this.nameTops]=res.data.url
        mobanadd(objs)
          .then((ress) => {
            if (ress.code === 1) {
              ElMessage.success("导入成功");
              this.getData();
            } else {
              ElMessage.error(ress.msg || "导入失败");
            }
          })
          .catch((error) => {
            ElMessage.error("请求失败，请稍后重试");
          })
          .finally(() => {
            this.loadingInstance.close();
          });
      } else {
        ElMessage.error(res.msg || "上传失败");
        this.loadingInstance.close();
      }
    },

    handleError(err, file, fileList) {
      ElMessage.error("上传失败，请检查网络或文件格式");
      this.loadingInstance.close();
    },

    getData() {
      moban2().then((res) => {
        if (res.code === 1) {
          this.tableData = [
            { name: "核校模版", link: res.data.data1.hfile,nameTops:'hfile' },
            { name: "督课模版", link: res.data.data1.dfile ,nameTops:'dfile'},
          ];
        }
      });
    },
  },
  created() {
    this.getData();
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限

  },
};
</script>

<style scoped>
.upload-demo {
  display: inline;
  margin-left: 10px;
}
</style>